<template>
  <div class="nav-box">
    <figure>
      <img src="../assets/images/1.png" alt="">
      <figcaption>嗨购超市</figcaption>
    </figure>
    <figure>
      <img src="../assets/images/2.png" alt="">
      <figcaption>数码电器</figcaption>
    </figure>
    <figure>
      <img src="../assets/images/3.png" alt="">
      <figcaption>嗨购服饰</figcaption>
    </figure>
    <figure>
      <img src="../assets/images/4.png" alt="">
      <figcaption>嗨购生鲜</figcaption>
    </figure>
    <figure>
      <img src="../assets/images/5.png" alt="">
      <figcaption>嗨购到家</figcaption>
    </figure>
    <figure>
      <img src="../assets/images/6.png" alt="">
      <figcaption>9.9元拼</figcaption>
    </figure>
    <figure>
      <img src="../assets/images/7.png" alt="">
      <figcaption>领券</figcaption>
    </figure>
    <figure>
      <img src="../assets/images/8.png" alt="">
      <figcaption>领金贴</figcaption>
    </figure>
    <figure>
      <img src="../assets/images/9.png" alt="">
      <figcaption>plus会员</figcaption>
    </figure>
    <figure>
      <img src="../assets/images/10.png" alt="">
      <figcaption>嗨购超市</figcaption>
    </figure>
  </div>
</template>

<script>

export default {
    name:"NavBar",
    data(){
      return {

      }
    },
    methods:{
      changMsg(){
        this.msg += "1";

        this.$nextTick(()=>{
          console.log(document.getElementById("p01").innerHTML);
        });
        
      }
    },
    // updated(){
    //   console.log(document.getElementById("p01").innerHTML);
    // }
}
</script>

<style scoped>
  .nav-box{
    width: 100%;
    height: 10rem;
    /* background-color: gray; */
    text-align: center;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }

</style>